<template  #header>
  <el-tabs type="border-card" v-model="activeName" :before-leave="changeTab">
    <el-tab-pane label="经销商" name="dealerManage">
    <template>
      <div class="card-header">
        <!-- <img src="../../assets/logo.png" style="width: 50px; height: 50px" /> @tab-click="tabSelect" -->
        <span>经销商列表</span>
      </div>
    </template>
    <el-row :gutter="10">
       <el-input
          placeholder="搜索姓名或手机"  style="width: 150px;margin-right:10px;"
          v-model="searchContent"
        ></el-input
      > 
        <el-button type="primary" size="mini" @click="handlerSearch">搜索</el-button>
        <el-button type="primary" size="mini" @click="showAddDealerDialog">添加</el-button>
       
    </el-row>
    <el-table :data="tableData" style="width: 100%" 
      highlight-current-row 
      row-key="id" 
      @row-dblclick="showDeposit"
      @current-change="currentRowSelect"
    >
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="手机" />
      <el-table-column prop="ownArea" label="所属区域" />
      <el-table-column prop="address" label="详细地址" />
      <!-- <el-table-column prop="deposit" label="押金金额" />
      <el-table-column prop="depositDate" label="押金时间" />
      <el-table-column prop="depositDate" label="抵押商品" /> -->
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="enabled" label="合作状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.state"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="enabledChange(scope.row.id)"
            
          >
          </el-switch>
          <!-- <el-tag
            type="success"
            style="margin-right: 4px">{{ scope.row.state == 1 ? "合作中" : "未合作" }}  </el-tag> -->
        </template>
      </el-table-column>
       <el-table-column prop="adminName" label="创建人" />
       <el-table-column prop="createDate" label="创建时间" />

      <el-table-column label="操作" width="260">
        <template #default="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="float: right; margin-top: 10px"
      :currentPage="currentPage"
      :page-size="10"
      :page-sizes="[10, 20, 100, 500]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  <DealerAdd
    :centerDialogVisible="centerDialogVisible"
    @onCloseDialog="closeDialogVisible()"
  ></DealerAdd>
  <DealerEdit
    v-if="editDialogVisible === true"
    :dealerId="id"
    :editDialogVisible="editDialogVisible"
    @onEditCloseDialog="closeEditDialogVisible"
  ></DealerEdit>
  <!-- <DealerShift
    v-if="shiftDialogVisible === true"
    :dealerId="id"
    :shiftDialogVisible="shiftDialogVisible"
    @onShiftCloseDialog="closeShiftDialogVisible"
  ></DealerShift> -->
  

    </el-tab-pane>
    <el-tab-pane label="押金信息"  name="depositManage" >
          <el-row :gutter="10">
          <el-col :span="4">
            <el-button type="primary" @click="handleDeposit">添加押金</el-button>
          </el-col>
        </el-row>

      <el-table :data="depositData" style="width: 100%">
         <el-table-column prop="dealerName" label="经销商" />
        <el-table-column prop="productName" label="商品" /> 
         <el-table-column prop="productCount" label="数量" /> 
         <el-table-column prop="deposit" label="押金金额（元）" />
          <el-table-column prop="depositDate" label="押金时间" />
         <el-table-column label="操作" width="260">
          <template #default="scope">
            <el-button
              size="mini"
              @click="handleEditDeposit(scope.$index, scope.row)"
              type="primary">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDeleteDeposit(scope.$index, scope.row)"
              >删除</el-button>
          </template>
      </el-table-column>
      </el-table>
      <AddDeposit
        v-if="depositDialogVisible === true"
        :dealerId="id"
        :depositDialogVisible="depositDialogVisible"
        @onCloseDepositVisible="closeDepositDialogVisible"
      ></AddDeposit> 
     <EditDeposit
        v-if="depositEditDialogVisible === true"
        :depositId="depositId"
        :depositEditDialogVisible="depositEditDialogVisible"
        @onCloseEditDepositVisible="closeEditDepositDialogVisible"
      ></EditDeposit> 

      
    </el-tab-pane>
  
  </el-tabs>
</template>

<script>
import { reactive,toRefs,onMounted } from "vue"; 
import DealerAdd from "@/components/dealer/DealerAdd.vue";
import DealerEdit from "@/components/dealer/DealerEdit.vue";
// import DealerShift from "@/components/dealer/DealerShift.vue";
import {useHandlerEdit,useHandleSizeChange,useHandleCurrentChange,useHandlerSearch,useDelete,loadData,
 getRequest,putRequest,deleteRequest} from '../../utils/api'
import {ElMessage,ElMessageBox,ElNotification  } from 'element-plus'
import AddDeposit from "../../components/dealer/AddDeposit.vue";
import EditDeposit from "../../components/dealer/EditDeposit.vue";

export default {
   name: "SysDealer",
  components: {
    DealerAdd,
    DealerEdit,
    // DealerShift,
   AddDeposit,
   EditDeposit
},
 
  setup(props,{emit}){
    const baseUrl = "/sell/dealer/" ;
    const state = reactive({
      searchContent:'',
      tableData: [],
      depositData:[],
      centerDialogVisible:false,
      editDialogVisible:false ,
      // shiftDialogVisible:false,
      depositDialogVisible:false,
      depositEditDialogVisible:false,
      total:0,
      pageSize:10,
      currentPage:1,
      id:'',
      baseUrl,
      dealerName:'',
      activeName:'dealerManage',
      depositId:''
    });


    const showDeposit = (row, column, event)=>{
        state.activeName = 'depositManage';
       state.id = row.id ;
    }

    const loadDepositData = ()=>{
        getRequest('/sell/dealer/deposit',{id:state.id}).then(response => {
          if (response) {
           state.depositData = response.data;
          // state.total = response.page.totalCount ;
          }
        })
    }


    const enabledChange = (dealerId)=>{
      putRequest(`/sell/dealer/status/${dealerId}`).then(res=>{
        if(res){
            ElMessage.success({
                        type:"success",
                        title:'成功',
                        message:"操作成功",
                        duration:2000
                      });
        }
      })
    }
    const showAddDealerDialog=()=>{
      state.centerDialogVisible = true ;
    }

     const closeDialogVisible=(visible,data)=>{
        
      state.centerDialogVisible=false ;
       loadData(state,state.baseUrl)
    }
    
    const closeEditDialogVisible=(visible,data)=>{
      state.editDialogVisible=visible ;
       
      if(data!==undefined){
        loadData(state,state.baseUrl)
      }
    }
    // const closeShiftDialogVisible=(visible,data)=>{
    //   state.shiftDialogVisible = visible ;
    //   if(data!==undefined){
    //     loadData(state,state.baseUrl)
    //   }
    // }

    const closeDepositDialogVisible=(visible,data)=>{
      state.depositDialogVisible= visible ;
      if(data!==undefined){
        loadDepositData();
      }
    }

    const closeEditDepositDialogVisible=(visible,data)=>{
      state.depositEditDialogVisible= visible ;
      if(data!==undefined){
        loadDepositData();
      }
    }

    const handleEditDeposit=(index,row)=>{
        state.depositId=row.id ;
        state.depositEditDialogVisible = true ;
    }

    const handleDeleteDeposit = (index,row)=>{
      
 ElMessageBox.confirm("你确定要删除吗","提示",{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning',
        callback:(action)=>{
          if('confirm'===action){
                    deleteRequest('/sell/dealer/deposit',{id:row.id}).then(
                      response=>{
                        if(response.code==200){
                         loadDepositData();
                          ElNotification({
                          type:'success',
                          title:'成功',
                          message:"删除成功",
                          duration:2000
                          });
                        }
                      },error=>{
                        ElNotification({
                        type:"error",
                        title:'失败',
                        message:"删除失败",
                        duration:2000
                      });
  
                  }
                );
          }
         }
      })
    }
   
    const currentChange=(pageNo)=>{
      state.currentPage=pageNo;
      loadData(state,state.baseUrl);
    }
    // const handleChange=()=>{
    //     state.shiftDialogVisible = true ;
    // }
    const handleDeposit=()=>{
        state.depositDialogVisible = true ;
    }

    const currentRowSelect=(currentRow,oldCurrentRow)=>{
       state.id = currentRow.id ;
    }

    // const tabSelect  = (r)=>{
    //    console.info(r.index)
    //    if(r===1){
          
    //       if(state.id){
    //           return true ;
    //       }else{
    //         return false ;
    //       }
    //    }
    // }

  const changeTab = (activeName, oldActiveName)=>{
    return new Promise((resolve, reject)=>{

      if(activeName=='depositManage'){
     
          if(state.id){
             loadDepositData()
              return resolve() ;
          }else{
            ElMessage.error('请选中某一行经销商数据！')
            return reject() 
          }
      }
      return resolve()  ;

    })
  }

    onMounted(()=>{
      loadData(state,state.baseUrl);
    })
     return {
      ...toRefs(state), //解构响应式数据
      ...useDelete(state,baseUrl),
      ...useHandlerSearch(state,baseUrl),
      ...useHandlerEdit(state),
      ...useHandleSizeChange(state,baseUrl),
      ...useHandleCurrentChange(state,baseUrl),
      enabledChange,
      showAddDealerDialog,
      closeDialogVisible,
      closeEditDialogVisible,
      // closeShiftDialogVisible,
      currentChange,
     handleDeposit,
     closeDepositDialogVisible,
     currentRowSelect,
     showDeposit,
    //  tabSelect,
     changeTab,
     closeEditDepositDialogVisible,
     handleEditDeposit,
     handleDeleteDeposit
    }
  }
};
</script>